@import "../../../source/core/classes";
@import "../videoList/videoList.scss";
.main {
	background-color: #FAFAFE;
	overflow: hidden;
	width: 100%;
	height: 100%;
	.main-content {
		border-bottom: 100rpx;
		.video-block {
			width: 100%;
			.video-player {
				width: 100%;
				height: 56vw;
			}
		}
		.video-info{
			font-size: 36rpx;
			font-weight: bolder;
			padding: 20rpx 20rpx;
		}
		.video-info-lower{
			@include flexbox;
			@include justify-content(space-between);
			@include align-items(center);
			padding: 0 20rpx;
			.info-lower-right{
				@include flex(1);
				@include flexbox;
				@include align-items(center);
				@include  justify-content(flex-end);
				text-align: right;
				>button{
					margin-left: 20rpx;
					font-size: 28rpx;
					.img-icon{
						display: inline-block;
						margin-top: -8rpx;
					}
				}
			}
		}
		.subtitle{
			font-size: 24rpx;
			color: #aaa;
		}
		.video-uploader{
			@include flexbox;
			@include align-items(center);
			margin: 0 30rpx;
			padding: 0 0 30rpx 0;
			border-bottom: solid 1px #e0e0e0;
			.user-avatar{
				margin-right: 20rpx;
				.user-avatar-img{
					width: 80rpx;
					height: 80rpx;
					border-radius: 999rpx;
					display: block;
				}
			}
			.video-brief{
				font-size: 28rpx;
				@include flex(1);
				.user-nickname{
					@include flexbox();
					@include align-items(center);
					font-weight: bolder;
				}
				.create-time{
					color: #666666;
				}
			}
			.video-mutual{
				@include flexbox;
				>button{
					@include flexbox;
					@include align-items(center);
					padding: 0 12rpx;
					border: none;
					background: none;
					outline: none;
					&:after{
						border: none;
					}
				}
				.video-mutual-count{
					font-size: 26rpx;
					margin-left: 12rpx;
					color: #9e9e9e;
				}
			}
		}
		.video-comment-view{
			padding: 0 30rpx;
			margin-top: 30rpx;
			font-size: 28rpx;
			.comment-title{
				@include flexbox;
				@include justify-content(space-between);
				.like-count{
					padding-left: 10rpx;
					.img-icon{
						margin-top: -10rpx;
						width: 36rpx;
						height: 36rpx;
						margin-left: 10rpx;
					}
				}
			}
		}
		.comments-list{
			font-size: 28rpx;
			color: #616161;
			padding: 15rpx 30rpx;
			border-bottom: solid 1px #e0e0e0;
			.comments-item{
				margin: 15rpx 0;
				.comment-username{
					color: #5fa4c1;
					font-weight: bold;
				}
			}
			.view-more-comments{
				font-size: 28rpx;
				color: #5fa4c1;
				font-weight: bold;
				text-align: center;
				padding: 15rpx;
			}
		}
	}
	.guess-title{
		padding: 30rpx 0;
		text-align: center;
		font-size: 34rpx;
		color: #707070;
		//border-top: solid 1px #e0e0e0;
	}
}
.focusBtn{
	padding: 0 8rpx;
	height: 36rpx;
	line-height: 36rpx;
	font-size: 24rpx;
	border-radius: 4rpx;
	margin-left: 22rpx;
	display: inline-block;
}
.follow{
	color: #fd8671;
	border: solid 1px #fd8671;
}
.unfollow{
	color: #bdbdbd;
	border: solid 1px #bdbdbd;
}